<template>
  <div>
     <div class="most-expected">
    <span class="title">近期最受期待</span>
    <div  class="expected">
      <div class="most">
        <div class="most-expected-list" v-for="item in cominglist" :key="item.id">
        <div class="poster">
          <img :src="item.img" />
          <div class="score">{{ item.wish }}人想看</div>
        </div>
        <div class="comingMid">
          <div class="line-ellipsis">{{ item.nm }}</div>
          <div>{{ item.comingTitle }}</div>
        </div>
      </div>
      </div>
    </div>
  </div>

        <div class="come">
              <div v-for="item2 in comelist" :key="item2.id">
                  <div class="title">{{item2.comingTitle}}</div>
                  <div class="comelist">
                        <div class="left"><img :src="item2.img" /></div>
                        <div class="mid">
                            <div class="nm">{{item2.nm}}</div>
                            <div class="wish"><span>{{item2.wish}}</span>人想看</div>
                            <div>主演：{{item2.star}}</div>
                            <div>{{item2.rt}}上映</div>
                        </div>
                        <div class="yu" v-if="item2.preShow==true">预售</div>
                        <div class="want" v-else>想看</div>
                  </div>
              </div>
        </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "wait",
  data: function () {
    return {
      cominglist: [],
      comelist:[],
    };
  },
  mounted() {
    //热映下面的列表数据
    axios
      .get(
        "ajax/mostExpected?ci=70&limit=10&offset=0&token=&optimus_uuid=480842A0C91111EB9827F329EAA56BE680A3670A43BB475F92375ED7BDEBF8D2&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res);
        var cominglist = res.data.coming;
        cominglist.forEach((item) => {
          item.img = item.img.replace("w.h", "85.115");
          item.comingTitle = item.comingTitle.substr(0, 5);
        });
        this.cominglist = cominglist;
      });
    axios
      .get(
        "ajax/comingList?ci=70&token=&limit=10&optimus_uuid=480842A0C91111EB9827F329EAA56BE680A3670A43BB475F92375ED7BDEBF8D2&optimus_risk_level=71&optimus_code=10"
      )
      .then((res) => {
        console.log(res);
        var comelist = res.data.coming;
        comelist.forEach((item) => {
          item.img = item.img.replace("w.h", "64.90");
        });
        this.comelist = comelist;
      });
  },
};
</script>

<style  scoped>
.most-expected{
  padding: 12px 0 12px 15px;
}
.title{
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}
.most-expected-list .poster{
  position: relative;
}
.expected{
  overflow: scroll;
  white-space: nowrap;
}
.expected .most{
  width: 1000px;
  display: flex;
  overflow: hidden;
}
.most-expected-list{
  margin-right: 20px;
}
.most-expected-list .poster img{
  width: 85px;
  height: 115px;
}
.most-expected-list .poster div{
  color: #faaf00;
  font-size: 11px;
  font-weight: 600;
  position: absolute;
  left: 4px;
  bottom: 2px;
}
.most-expected-list .comingMid{
  font-size: 12px;
  color: #999;
}
.most-expected-list .comingMid .line-ellipsis{
  font-size: 13px;
  font-weight: 600;
  color: #222;
  margin-bottom: 3px;
}
.line-ellipsis{
    width: 85px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/*********************************************************/
.come{
  padding: 12px 0 12px 15px;
}
.comelist{
  display:flex;
  justify-content:space-between;
  position: relative;
}
.comelist .mid{
  font-size: 13px;
  color: #666;
  margin-top: 5px;
  position: absolute;
  left: 100px;
}
/* .comelist .mid div{
  margin-top: 5px;
} */
.comelist .mid .nm{
  width: 202px;
  font-size: 17px;
  color: #333;
  font-weight: 700;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap
}
.comelist .mid .wish{
  margin-top: 10px;
}
.comelist .mid .wish span{
  color: #faaf00;
  font-size: 15px;
  font-weight: 600;
}
.comelist .want{
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  background-color: #faaf00;
  border: none;
  color: #fff;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.comelist .yu{
  width: 47px;
  height: 27px;
  line-height: 28px;
  text-align: center;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  background-color: #3c9fe6;
  border: none;
  color: #fff;
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>